<template>

    <div class="driver-details_box">

        <div class="borderbottom">
            <h3 class="order-details_h3">基础信息</h3>
            <el-row class="order-details_content">
                <el-col :span="24" class="paddingbottom">
                    <el-col :span="12">账号:{{driverDetailData.car_number}}</el-col>
                    <el-col :span="12">创建时间：{{driverDetailData.created_at}}</el-col>
                </el-col>
                <el-col :span="24" class="paddingbottom">
                    <el-col :span="12">姓名:{{driverDetailData.user?driverDetailData.user.name:''}}</el-col>
                    <el-col :span="12">性别:{{driverDetailData.user?driverDetailData.user.sex:''}}</el-col>
                </el-col>
                <el-col :span="24" class="paddingbottom">
                    <el-col :span="12">联系方式:{{driverDetailData.user?driverDetailData.user.phone:''}}</el-col>
                    <el-col :span="12">家庭地址:</el-col>
                </el-col>
                <el-col :span="24" class="paddingbottom">
                    <el-col :span="12">城市:{{driverDetailData.site?driverDetailData.site.name:''}}</el-col>
                    <el-col :span="12">身份证:{{driverDetailData.user?driverDetailData.user.id_card:''}}</el-col>
                </el-col>
                <el-col :span="24" class="paddingbottom">
                    <el-col :span="12">车辆类型:{{driverDetailData.car_type}}</el-col>
                    <el-col :span="12">车辆品牌:{{driverDetailData.brand}}</el-col>
                </el-col>
                <el-col :span="24" class="paddingbottom">车牌号码:{{driverDetailData.car_number}}</el-col>
            </el-row>
        </div>
        <div class="borderbottom">
            <h3 class="order-details_h3">状态</h3>
            <el-row class="order-details_content">
                <el-col :span="24" class="paddingbottom">账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:{{driverDetailData.status?'已启用':'已停用'}}</el-col>
                <el-col :span="24" class="paddingbottom">司机状态:{{driverDetailData.is_sign?'已签到':'未签到'}}</el-col>
                <el-col :span="24" class="paddingbottom">最后位置:{{driverDetailData.geohash}}</el-col>
                <el-col :span="24" class="paddingbottom">最后时间:{{driverDetailData.updated_at}}</el-col>
                <el-col :span="24" class="paddingbottom">停用原因:{{driverDetailData.comment}}</el-col>
            </el-row>
        </div>
        <div class="borderbottom" style="border: none">
            <h3 class="order-details_h3">属性</h3>
            <el-row class="order-details_content">
                <el-col :span="24" class="paddingbottom">
                    <el-col :span="12">所属连队:{{driverDetailData.work_fleet_id}}</el-col>
                    <el-col :span="12" v-if="driverDetailData.role == 1">所属角色:干线司机</el-col>
                    <el-col :span="12" v-if="driverDetailData.role == 2">所属角色:末端司机</el-col>
                </el-col>
                <el-col :span="24" class="paddingbottom">
                    <el-col :span="12">车辆容量:{{driverDetailData.car_capacity}}</el-col>
                    <el-col :span="12">服务属性:{{driverDetailData.type}}</el-col>
                </el-col>
            </el-row>
        </div>
    </div>

</template>
<script>
    export default {
        name: 'user-details',
        components: {},
        props: {
            driverDetail: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {}
        },
        computed: {
            driverDetailData: function () {
                return this.driverDetail;
            }
        },
        methods: {}
    }
</script>


<style scoped lang="less">
    .driver-details_box {
        display: flex;
        flex-direction: column;
        .img-icon {
            width: 24px;
            vertical-align: -5px;
            padding-right: 5px;
        }
        .img-icon-edit{
            width: 20px;
            vertical-align: -4px;
            padding-left: 10px;
        }
        .changeedit{
            cursor: pointer;
        }
        .colorchange{
            color: #009688;
            padding-left: 4px;
        }
        .borderbottom {
            padding: 0 41px;
            border-bottom: 3px dashed #EEEEEE;
        }
        .paddingbottom {
            padding-bottom: 10px;
        }
        .order-details_title {
            margin: 0 auto;
        }
        .order-details_h3 {
            font-size: 18px;
            color: #000;
            margin: 7px 0 11px 0px;
        }
        .order-details_content {
            overflow: hidden;
            font-size: 16px;
        }

    }

</style>

